<template>
	<view>
		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height: 80vh;">
				<view class="cu-item shadow" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list" :key="index" @tap="TabSelect"
				 :data-id="index">
					{{item.showname}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height: 84vh;background-color: white;"
			 :scroll-into-view="'main-'+mainCur">
				<view class="padding-top padding-lr">
					<slot></slot>
				</view>
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"DivTab",
    props:{
      searchType:{
        type:Number,
        require:true,
        default:-1
      }
    },
    // 监听搜索组件造成tab值改变
    watch:{
      searchType(newValue){
        this.tabCur = newValue;
        this.mainCur = newValue;
      }
    },
		data() {
			return {
				list:[
					{
						showname:'cpu',
						name:'cpu'
					},{
						showname:'显卡',
						name:'xianka'
					},{
						showname:'主板',
						name:'zhuban'
					},{
						showname:'内存',
						name:'neicun'
					},{
						showname:'硬盘',
						name:'yingpan'
					},{
						showname:'散热',
						name:'sanreqi'
					},{
						showname:'电源',
						name:'dianyuan'
					},{
						showname:'机箱',
						name:'jixiang'
					}	
				],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
			};
		},
		methods:{
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.$emit('changetab',this.list[this.tabCur].name)
				// this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
		}
	}
</script>

<style lang="scss" scoped>
.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #F1F1F1;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: white;
		color: #1296db;
		// border: 1px solid #1296db;
		// border-radius: 5px;
		font-weight: bold;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 10upx;
		height: 60upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: #1296db;
		top: 8px;
		left: 18vw;
		
		// margin: auto;
	}
	.VerticalBox {
		display: flex;
	}
	
	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}
</style>
